<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
					margin:0 auto;
					width: 1000px;
					height: 460px;
					position: relative;
			}
			.box_img{
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				transition: all 1.5s;
			}
			/* 默认显示第一张图片 */
			.box_img:nth-child(1){
				opacity: 1;
			}
			.left{
				width: 35px;
				height: 70px;
				color: #ccc;
				position: absolute;
				top: 195px;
				border-radius: 0 5px 5px 0;
				text-align: center;
				line-height: 70px;
				font-size: 27px;
			}
			.left:hover{
					background-color: #00000050;
			}
			.right{
				width: 35px;
				height: 70px;
				color: #ccc;
				position: absolute;
				top: 195px;
				right: 0;
				border-radius: 0 5px 5px 0;
				text-align: center;
				line-height: 70px;
				font-size: 27px;
			}
			.right:hover{
					background-color: #00000050;
			}
			.radio{
				position: absolute;
				bottom: 30px;
				right: 100px;
			}
			.radio>ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.radio li{
				width: 14px;
				height: 14px;
				border-radius: 100%;
				background-color: #ccc;
				float: left;
				margin-right: 10px;
			}
			.radio li:hover{
				background-color: #fff;
			}
		</style>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		
		<div class="box">
			<div class="box_img"><img src="./img/1.jpg" width="1000"height="460"></div>
			<div class="box_img"><img src="./img/2.jpg" width="1000"height="460"></div>
			<div class="box_img"><img src="./img/3.jpg" width="1000"height="460"></div>
			<!-- <div class="box_img"><img src="./img/4.jpg" width="1000"height="460"></div> -->
			<!-- 控制按钮 -->
			<div class="left">&lt;</div>
			<div class="right">&gt;</div>
			<!-- 小圆圈 -->
			<div class="radio">
				<ul>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	<script type="text/javascript">
		$(function(){
			let index = 0 ;
			setInterval(function(){
				if(index==$(".box_img").length-1){
					index=0;
					$(".box_img").css("opacity","0")
					$(".box_img").eq(index).css("opacity","1")
				}else{
					index++;
					$(".box_img").css("opacity","0")
					$(".box_img").eq(index).css("opacity","1")
				}
			
			},2000)
		})
	</script>	
	</body>
</html>
